<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 用户信息卡片 -->
      <view class="card user-info-card">
        <view class="user-avatar-section">
          <view class="avatar-container" @tap="changeAvatar">
            <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
            <view class="avatar-edit">
              <text class="edit-icon">✏️</text>
            </view>
          </view>
          <view class="user-details">
            <text class="user-name">{{ userInfo.name }}</text>
            <text class="user-phone">{{ userInfo.phone }}</text>
            <text class="user-join">注册时间: {{ userInfo.joinTime }}</text>
          </view>
        </view>
        
        <view class="user-stats">
          <view class="stat-item" @tap="goToPage('bill')">
            <text class="stat-value">{{ userStats.currentMonthUsage }}</text>
            <text class="stat-label">本月用电(kWh)</text>
          </view>
          <view class="stat-item" @tap="goToPage('bill')">
            <text class="stat-value">{{ userStats.currentMonthCost }}</text>
            <text class="stat-label">本月费用(元)</text>
          </view>
          <view class="stat-item" @tap="goToPage('analysis')">
            <text class="stat-value">{{ userStats.totalDevices }}</text>
            <text class="stat-label">电表数量</text>
          </view>
        </view>
      </view>
      
      <!-- 账户状态卡片 -->
      <view class="card account-status-card" :class="accountStatusClass">
        <view class="account-status-header">
          <text class="status-title">账户状态</text>
          <view class="status-badge" :class="statusBadgeClass">
            <text class="badge-text">{{ accountStatusText }}</text>
          </view>
        </view>
        
        <view class="account-details">
          <view class="detail-item">
            <text class="detail-label">服务到期时间</text>
            <text class="detail-value">{{ userInfo.expireDate }}</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">剩余天数</text>
            <text class="detail-value" :class="remainingDaysClass">{{ userInfo.remainingDays }}天</text>
          </view>
          
          <view class="detail-item">
            <text class="detail-label">当前套餐</text>
            <text class="detail-value">{{ userInfo.currentPlan }}</text>
          </view>
        </view>
        
        <view class="renewal-actions">
          <button class="renewal-btn primary" @tap="showRenewalOptions">
            <text class="btn-text">立即续费</text>
          </button>
          <button class="renewal-btn secondary" @tap="showUsageHistory">
            <text class="btn-text">使用记录</text>
          </button>
        </view>
      </view>
      
      <!-- 快捷功能 -->
      <view class="card quick-actions-card">
        <view class="card-header">
          <text class="card-title">快捷功能</text>
        </view>
        
        <view class="quick-actions">
          <view class="action-item" @tap="goToPage('index')">
            <view class="action-icon" style="background: #e6f7ff;">
              <text class="iconfont" style="color: #1890ff;">⚡</text>
            </view>
            <text class="action-text">实时监控</text>
          </view>
          
          <view class="action-item" @tap="goToPage('analysis')">
            <view class="action-icon" style="background: #f6ffed;">
              <text class="iconfont" style="color: #52c41a;">📊</text>
            </view>
            <text class="action-text">数据分析</text>
          </view>
          
          <view class="action-item" @tap="goToPage('bill')">
            <view class="action-icon" style="background: #fff7e6;">
              <text class="iconfont" style="color: #fa8c16;">💰</text>
            </view>
            <text class="action-text">账单查询</text>
          </view>
          
          <!-- <view class="action-item" @tap="showDeviceManagement">
            <view class="action-icon" style="background: #f9f0ff;">
              <text class="iconfont" style="color: #722ed1;">🔧</text>
            </view>
            <text class="action-text">设备管理</text>
          </view> -->
        </view>
      </view>
      
      <!-- 设置选项 -->
      <view class="card settings-card">
        <view class="card-header">
          <text class="card-title">账户设置</text>
        </view>
        
		<!-- 在 settings-card 中添加企业信息设置项 -->
		<view class="setting-item" @tap="editCompanyInfo">
		  <view class="setting-left">
		    <view class="setting-icon" style="background: #f0f5ff;">
		      <text class="iconfont" style="color: #2f54eb;">🏢</text>
		    </view>
		    <text class="setting-text">企业信息设置</text>
		  </view>
		  <view class="setting-right">
		    <text class="setting-arrow">›</text>
		  </view>
		</view>
		
        <view class="settings-list">
          <!-- 个人信息 -->
          <view class="setting-item" @tap="editProfile">
            <view class="setting-left">
              <view class="setting-icon" style="background: #e6f7ff;">
                <text class="iconfont" style="color: #1890ff;">👤</text>
              </view>
              <text class="setting-text">个人信息</text>
            </view>
            <view class="setting-right">
              <text class="setting-arrow">›</text>
            </view>
          </view>
          
          <!-- 修改密码 -->
          <view class="setting-item" @tap="changePassword">
            <view class="setting-left">
              <view class="setting-icon" style="background: #f6ffed;">
                <text class="iconfont" style="color: #52c41a;">🔒</text>
              </view>
              <text class="setting-text">修改密码</text>
            </view>
            <view class="setting-right">
              <text class="setting-arrow">›</text>
            </view>
          </view>
          
          <!-- 消息通知 -->
         <!-- <view class="setting-item" @tap="notificationSettings">
            <view class="setting-left">
              <view class="setting-icon" style="background: #fff7e6;">
                <text class="iconfont" style="color: #fa8c16;">🔔</text>
              </view>
              <text class="setting-text">消息通知</text>
            </view>
            <view class="setting-right">
              <text class="setting-status">{{ userSettings.notifications ? '开启' : '关闭' }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view> -->
          
          <!-- 用电提醒 -->
          <!-- <view class="setting-item" @tap="usageAlertSettings">
            <view class="setting-left">
              <view class="setting-icon" style="background: #fff2e8;">
                <text class="iconfont" style="color: #fa541c;">⚠️</text>
              </view>
              <text class="setting-text">用电提醒</text>
            </view>
            <view class="setting-right">
              <text class="setting-status">{{ userSettings.usageAlerts ? '开启' : '关闭' }}</text>
              <text class="setting-arrow">›</text>
            </view>
          </view> -->
          
          <!-- 数据备份 -->
          <!-- <view class="setting-item" @tap="dataBackup">
            <view class="setting-left">
              <view class="setting-icon" style="background: #f9f0ff;">
                <text class="iconfont" style="color: #722ed1;">💾</text>
              </view>
              <text class="setting-text">数据备份</text>
            </view>
            <view class="setting-right">
              <text class="setting-arrow">›</text>
            </view>
          </view> -->
        </view>
      </view>
      
      <!-- 帮助与反馈 -->
      <view class="card help-card">
        <view class="card-header">
          <text class="card-title">帮助与反馈</text>
        </view>
        
        <view class="help-list">
          <view class="help-item" @tap="showHelpCenter">
            <view class="help-left">
              <text class="help-icon">❓</text>
              <text class="help-text">帮助中心</text>
            </view>
            <view class="help-right">
              <text class="help-arrow">›</text>
            </view>
          </view>
          
          <view class="help-item" @tap="showFeedback">
            <view class="help-left">
              <text class="help-icon">💬</text>
              <text class="help-text">意见反馈</text>
            </view>
            <view class="help-right">
              <text class="help-arrow">›</text>
            </view>
          </view>
          
          <view class="help-item" @tap="showAbout">
            <view class="help-left">
              <text class="help-icon">ℹ️</text>
              <text class="help-text">关于我们</text>
            </view>
            <view class="help-right">
              <text class="help-version">v{{ appVersion }}</text>
              <text class="help-arrow">›</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @tap="handleLogout">退出登录</button>
      </view>
    </view>
    
    <!-- 续费选项弹窗 -->
    <view class="renewal-modal" v-if="showRenewalModal">
      <view class="modal-mask" @tap="closeRenewalModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择续费时长</text>
          <text class="modal-close" @tap="closeRenewalModal">×</text>
        </view>
        
        <view class="plan-options">
          <view 
            v-for="plan in renewalPlans" 
            :key="plan.months"
            class="plan-option"
            :class="{ 'plan-option-selected': selectedPlan === plan.months }"
            @tap="selectPlan(plan.months)"
          >
            <view class="plan-duration">
              <text class="plan-months">{{ plan.months }}</text>
              <text class="plan-unit">个月</text>
            </view>
            <view class="plan-price">
              <text class="price-symbol">¥</text>
              <text class="price-amount">{{ plan.price }}</text>
            </view>
            <view class="plan-savings" v-if="plan.savings">
              <text class="savings-text">节省{{ plan.savings }}%</text>
            </view>
          </view>
        </view>
        
        <view class="payment-summary">
          <view class="summary-item">
            <text class="summary-label">选择时长</text>
            <text class="summary-value">{{ selectedPlanMonths }}个月</text>
          </view>
          <view class="summary-item">
            <text class="summary-label">应付金额</text>
            <text class="summary-value price">¥{{ selectedPlanPrice }}</text>
          </view>
        </view>
        
        <view class="modal-actions">
          <button class="action-btn cancel" @tap="closeRenewalModal">取消</button>
          <button class="action-btn confirm" @tap="handlePayment">立即支付</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    // 计算到期日期（模拟数据）
    const currentDate = new Date();
    const expireDate = new Date(currentDate);
    expireDate.setMonth(currentDate.getMonth() + 1); // 默认一个月后到期
    
    const remainingDays = Math.ceil((expireDate - currentDate) / (1000 * 60 * 60 * 24));
    
    return {
      userInfo: {
        name: "张先生",
        phone: "138****5678",
        avatar: "/static/default-avatar.png",
        joinTime: "2023-01-15",
        expireDate: this.formatDate(expireDate),
        remainingDays: remainingDays,
        currentPlan: "基础套餐"
      },
      userStats: {
        currentMonthUsage: "156.8",
        currentMonthCost: "125.6",
        totalDevices: "2"
      },
      userSettings: {
        notifications: true,
        usageAlerts: true
      },
      appVersion: "1.0.0",
      
      // 续费相关数据
      showRenewalModal: false,
      renewalPlans: [
        { months: 1, price: "50.00", savings: 0 },
        { months: 3, price: "135.00", savings: 10 },
        { months: 6, price: "240.00", savings: 20 },
        { months: 12, price: "420.00", savings: 30 }
      ],
      selectedPlan: 1
    }
  },
  
  computed: {
    // 账户状态相关计算属性
    accountStatusClass() {
      if (this.userInfo.remainingDays <= 0) {
        return 'account-status-expired';
      } else if (this.userInfo.remainingDays <= 7) {
        return 'account-status-warning';
      } else {
        return 'account-status-normal';
      }
    },
    
    accountStatusText() {
      if (this.userInfo.remainingDays <= 0) {
        return '已到期';
      } else if (this.userInfo.remainingDays <= 7) {
        return '即将到期';
      } else {
        return '使用中';
      }
    },
    
    statusBadgeClass() {
      if (this.userInfo.remainingDays <= 0) {
        return 'badge-expired';
      } else if (this.userInfo.remainingDays <= 7) {
        return 'badge-warning';
      } else {
        return 'badge-normal';
      }
    },
    
    remainingDaysClass() {
      if (this.userInfo.remainingDays <= 0) {
        return 'remaining-days-expired';
      } else if (this.userInfo.remainingDays <= 7) {
        return 'remaining-days-warning';
      } else {
        return 'remaining-days-normal';
      }
    },
    
    // 选择的套餐信息
    selectedPlanMonths() {
      const plan = this.renewalPlans.find(p => p.months === this.selectedPlan);
      return plan ? plan.months : 1;
    },
    
    selectedPlanPrice() {
      const plan = this.renewalPlans.find(p => p.months === this.selectedPlan);
      return plan ? plan.price : "50.00";
    }
  },
  
  methods: {
    // 日期格式化辅助方法
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 更换头像
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 这里应该上传图片到服务器并更新头像
          const tempFilePaths = res.tempFilePaths;
          this.userInfo.avatar = tempFilePaths[0];
          
          uni.showToast({
            title: '头像更新成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 显示续费选项
    showRenewalOptions() {
      this.showRenewalModal = true;
    },
    
    // 关闭续费弹窗
    closeRenewalModal() {
      this.showRenewalModal = false;
    },
    
    // 选择续费套餐
    selectPlan(months) {
      this.selectedPlan = months;
    },
    
    // 处理支付
    handlePayment() {
      uni.showLoading({
        title: '支付中...'
      });
      
      // 模拟支付过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 更新用户到期时间
        const currentDate = new Date();
        const newExpireDate = new Date(currentDate);
        newExpireDate.setMonth(currentDate.getMonth() + this.selectedPlanMonths);
        
        this.userInfo.expireDate = this.formatDate(newExpireDate);
        this.userInfo.remainingDays = Math.ceil((newExpireDate - currentDate) / (1000 * 60 * 60 * 24));
        
        // 关闭弹窗
        this.closeRenewalModal();
        
        uni.showToast({
          title: '续费成功',
          icon: 'success',
          duration: 2000
        });
        
        // 更新本地存储
        uni.setStorageSync('userInfo', this.userInfo);
      }, 2000);
    },
    
    // 显示使用记录
    showUsageHistory() {
      uni.navigateTo({
        url: '/pages/profile/usage-history'
      });
    },
    
    // 编辑个人信息
    editProfile() {
      uni.navigateTo({
        url: '/pages/profile/edit-profile'
      });
    },
    
    // 修改密码
    changePassword() {
      uni.navigateTo({
        url: '/pages/profile/change-password'
      });
    },
    
    // 通知设置
    notificationSettings() {
      uni.showModal({
        title: '消息通知设置',
        content: '是否开启消息通知？',
        confirmText: this.userSettings.notifications ? '关闭' : '开启',
        success: (res) => {
          if (res.confirm) {
            this.userSettings.notifications = !this.userSettings.notifications;
            uni.showToast({
              title: this.userSettings.notifications ? '通知已开启' : '通知已关闭',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 用电提醒设置
    usageAlertSettings() {
      uni.showModal({
        title: '用电提醒设置',
        content: '是否开启用电提醒功能？',
        confirmText: this.userSettings.usageAlerts ? '关闭' : '开启',
        success: (res) => {
          if (res.confirm) {
            this.userSettings.usageAlerts = !this.userSettings.usageAlerts;
            uni.showToast({
              title: this.userSettings.usageAlerts ? '提醒已开启' : '提醒已关闭',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 数据备份
    dataBackup() {
      uni.showLoading({
        title: '备份中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '数据备份成功',
          icon: 'success'
        });
      }, 1500);
    },
    
    // 设备管理
    showDeviceManagement() {
      uni.showModal({
        title: '设备管理',
        content: '此功能正在开发中，敬请期待',
        showCancel: false,
        confirmText: '知道了'
      });
    },
    
    // 帮助中心
    showHelpCenter() {
      uni.navigateTo({
        url: '/pages/profile/help-center'
      });
    },
    
    // 意见反馈
    showFeedback() {
      uni.navigateTo({
        url: '/pages/profile/feedback'
      });
    },
    
    // 关于我们
    showAbout() {
      uni.navigateTo({
        url: '/pages/profile/about'
      });
    },
	
	// 编辑企业信息
	editCompanyInfo() {
	  uni.navigateTo({
	    url: '/pages/profile/company-info'
	  });
	},
    
    // 页面跳转
    goToPage(page) {
      if (page === 'index') {
        uni.switchTab({
          url: '/pages/index/index'
        });
      } else if (page === 'analysis') {
        uni.switchTab({
          url: '/pages/analysis/analysis'
        });
      } else if (page === 'bill') {
        uni.switchTab({
          url: '/pages/bill/bill'
        });
      }
    },
    
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('isLogin');
            uni.removeStorageSync('userInfo');
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  },
  
  onLoad() {
    // 从缓存加载用户信息
    const savedUserInfo = uni.getStorageSync('userInfo');
    if (savedUserInfo) {
      this.userInfo = { ...this.userInfo, ...savedUserInfo };
    }
    
    // 加载用户设置
    const savedSettings = uni.getStorageSync('userSettings');
    if (savedSettings) {
      this.userSettings = { ...this.userSettings, ...savedSettings };
    }
  },
  
  onShow() {
    // 页面显示时保存设置
    uni.setStorageSync('userSettings', this.userSettings);
    
    // 检查账户状态，如果已过期，显示提示
    if (this.userInfo.remainingDays <= 0) {
      uni.showModal({
        title: '账户已到期',
        content: '您的账户服务已到期，请续费后继续使用',
        showCancel: false,
        confirmText: '立即续费',
        success: (res) => {
          if (res.confirm) {
            this.showRenewalOptions();
          }
        }
      });
    } else if (this.userInfo.remainingDays <= 7) {
      uni.showToast({
        title: `您的账户将在${this.userInfo.remainingDays}天后到期`,
        icon: 'none',
        duration: 3000
      });
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.status-bar {
  height: var(--status-bar-height);
  background: transparent;
}

.page-content {
  flex: 1;
  padding: 30rpx 30rpx 140rpx; /* 底部留出TabBar空间 */
}

/* 卡片通用样式 */
.card {
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.card-icon {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #1890ff;
  font-size: 36rpx;
}

/* 用户信息卡片样式 */
.user-avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #f0f0f0;
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background: #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid white;
}

.edit-icon {
  font-size: 20rpx;
  color: white;
}

.user-details {
  flex: 1;
}

.user-name {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.user-phone {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.user-join {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 30rpx;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 8rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666;
}

/* 账户状态卡片样式 */
.account-status-card {
  border-left: 8rpx solid #52c41a;
}

.account-status-normal {
  border-left-color: #52c41a;
}

.account-status-warning {
  border-left-color: #faad14;
}

.account-status-expired {
  border-left-color: #ff4d4f;
}

.account-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.status-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.badge-normal {
  background: #f6ffed;
  color: #52c41a;
}

.badge-warning {
  background: #fffbe6;
  color: #faad14;
}

.badge-expired {
  background: #fff2f0;
  color: #ff4d4f;
}

.account-details {
  margin-bottom: 30rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.remaining-days-normal {
  color: #52c41a;
}

.remaining-days-warning {
  color: #faad14;
}

.remaining-days-expired {
  color: #ff4d4f;
}

.renewal-actions {
  display: flex;
  gap: 20rpx;
}

.renewal-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.renewal-btn.primary {
  background: #1890ff;
  color: white;
}

.renewal-btn.secondary {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #e8e8e8;
}

/* 快捷功能样式 */
.quick-actions {
  display: flex;
  justify-content: space-around;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.action-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.action-icon .iconfont {
  font-size: 48rpx;
}

.action-text {
  font-size: 24rpx;
  color: #333;
}

/* 设置列表样式 */
.settings-list {
  margin-top: 10rpx;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
}

.setting-icon {
  width: 70rpx;
  height: 70rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.setting-icon .iconfont {
  font-size: 36rpx;
}

.setting-text {
  font-size: 28rpx;
  color: #333;
}

.setting-right {
  display: flex;
  align-items: center;
}

.setting-status {
  font-size: 24rpx;
  color: #999;
  margin-right: 16rpx;
}

.setting-arrow {
  font-size: 32rpx;
  color: #ccc;
}

/* 帮助与反馈样式 */
.help-list {
  margin-top: 10rpx;
}

.help-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
}

.help-item:last-child {
  border-bottom: none;
}

.help-left {
  display: flex;
  align-items: center;
}

.help-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.help-text {
  font-size: 28rpx;
  color: #333;
}

.help-right {
  display: flex;
  align-items: center;
}

.help-version {
  font-size: 24rpx;
  color: #999;
  margin-right: 16rpx;
}

.help-arrow {
  font-size: 32rpx;
  color: #ccc;
}

/* 退出登录样式 */
.logout-section {
  margin: 40rpx 0;
}

.logout-btn {
  background: #fff2f0;
  color: #ff4d4f;
  height: 88rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1rpx solid #ffccc7;
}

/* 续费弹窗样式 */
.renewal-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 24rpx;
  width: 600rpx;
  max-width: 90vw;
  padding: 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.modal-close {
  font-size: 48rpx;
  color: #999;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.plan-option {
  border: 2rpx solid #e8e8e8;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  transition: all 0.3s;
}

.plan-option-selected {
  border-color: #1890ff;
  background: #f0f8ff;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.1);
}

.plan-duration {
  margin-bottom: 16rpx;
}

.plan-months {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}

.plan-unit {
  font-size: 24rpx;
  color: #666;
  margin-left: 8rpx;
}

.plan-price {
  margin-bottom: 12rpx;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff4d4f;
}

.price-amount {
  font-size: 32rpx;
  font-weight: 600;
  color: #ff4d4f;
}

.plan-savings {
  background: #fff2e8;
  border-radius: 12rpx;
  padding: 4rpx 12rpx;
}

.savings-text {
  font-size: 20rpx;
  color: #fa541c;
}

.payment-summary {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-size: 28rpx;
  color: #666;
}

.summary-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.summary-value.price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.action-btn.cancel {
  background: #f5f5f5;
  color: #666;
  border: 1rpx solid #e8e8e8;
}

.action-btn.confirm {
  background: #1890ff;
  color: white;
}
</style>